<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <form class="layui-form layui-col-space5" id="sbumitForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">比赛ID</label>
                    <div class="layui-input-block">
                        <input type="text" name="match_id" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">赛事类型</label>
                    <div class="layui-input-block">
                        <select name="category" lay-filter="category">
                            <option value="">全部</option>
                            <option value="101">足球</option>
                            <option value="102">篮球</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select name="match_status" id="match_status">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">主队</label>
                    <div class="layui-input-block">
                        <input type="text" name="home" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">客队</label>
                    <div class="layui-input-block">
                        <input type="text" name="away" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">比赛时间</label>
                    <div class="layui-input-inline" style="width: 350px;">
                        <input type="text" name="start_time" placeholder="搜索开始时间" autocomplete="off" class="layui-input" style="width: 167px;display: inline" id="start_time_input">
                        -
                        <input type="text" name="end_time" placeholder="搜索截止日期" autocomplete="off" class="layui-input" style="width: 167px;display: inline" id="end_time_input">
                    </div>
                </div>
                <div class="layui-inline ">
                    <div class="layui-input-inline">
                        <div class="layui-btn" id="submit">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </div>

                        <div class="layui-btn" onclick="download1()">
                            导出
                        </div>
                    </div>
                </div>

            </div>
            </form>
        </div>

        <div class="layui-card-body">
            <table id="LAY-matches-match-manage"></table>

            <script type="text/html" id="table-match-list">

            </script>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script src="/assets/ue/third-party/jquery-1.10.2.js"></script>
<script src="/static/clipboard.min.js"></script>
<script>
    var $ALLSTATUS = <?php echo $stutus;?>;
    layui.config({
        base: "/layuiadmin/", //静态资源所在路径
    }).extend({
        index: "lib/index", //主入口模块
    }).use(["form", "table", "laydate"], function () {
        $ = layui.jquery, form = layui.form, table = layui.table,laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start_time_input',
            type: 'datetime'
        });
        laydate.render({
            elem: '#end_time_input',
            type: 'datetime'
        });
        $("#submit").click(function () {
            table.render(opTableObj());
        });
        form.on('select(category)', function (data) {
            if (data.value == '') {
                $("#match_status").html('<option value="">全部</option>');
            } else {
                $("#match_status").html('<option value="">全部</option><option value="1">未开赛</option><option value="2">进行中</option><option value="3">完场</option>');
            }

            form.render();
        });

        table.render(opTableObj());
    });

    function opTableObj() {
        return  {
            elem: '#LAY-matches-match-manage',
            id: '#demo',
            url: '/admin/matchlives/lists2?' + $("#sbumitForm").serialize(),
            defaultToolbar: [
                'filter','print',{title:'提示',layEvent: 'LAYTABLE_EXCEL',icon: 'layui-icon-table'},
            ],
            page: {
                curr: 1   //默认从第一页开始搜索
            },
            method: "get",
            //where: $("#sbumitForm").serialize(),
            limit: 20,
            limits: [20, 30, 50, 100, 200, 500],
            text: {
                none: '暂无相关数据！'//默认无数据
            },
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 0,//成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data', //数据列表的字段名称，默认：data
            },
            cols: [[
                {field: 'match_id', width: 100, title: '比赛ID', sort: true, fixed: 'left'},
                {
                    field: 'category_id', width: 110, title: '比赛类型', sort: true, fixed: 'left', templet: function (d) {
                        if (d.category_id = 101) {
                            return '足球';
                        }

                        return '篮球';
                    }
                },
                {field: 'name_zh_full', title: '所属赛事', width: 200, templet: function (d) {
                        if (d.name_en_full == d.name_zh_full) {
                            return d.name_zh_full;
                        }
                        return d.name_zh_full + '(' + d.name_en_full + ')';

                    }
                },
                {field: 'home', title: '主队', width: 200},
                {field: 'away', title: '客队', width: 200},
                {
                    field: 'match_status', title: '比赛状态', width: 100, templet: function (d) {
                        return $ALLSTATUS[d.category_id][d.match_status];
                    }
                },
                {
                    field: 'match_start_time', title: '比赛开始时间', width: 200,align: "center",  templet: function (d) {
                        return formatTimeStamp(d.match_start_time);
                    }
                },
                {
                    field: 'hd', title: '标清直播地址', width: 500, templet: function (d) {
                        return '<a href="javascript:;" data-clipboard-text="" class="font-primary" title="点击复制" onclick="copyText(\''+d.hd+'\')">' + d.hd + '</a>';
                    }
                },
                {
                    field: 'uhd', title: '高清直播地址', width: 500, templet: function (d) {
                        return '<a href="javascript:;" data-clipboard-text="" class="font-primary" title="点击复制" onclick="copyText(\''+d.uhd+'\')">' + d.uhd + '</a>';
                    }
                },
            ]],
            done: function (res, curr, count) {
                res.data.forEach(function (item, index) {

                });
            },
        };
    }

    function copyText(text) {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.setAttribute('value', text);
        input.select();
        if (document.execCommand('copy')) {
            document.execCommand('copy');
        }
        document.body.removeChild(input);
    }

    function formatTimeStamp(time_stamp) {
        const time = new Date(time_stamp * 1000);
        const Y = time.getFullYear()
        const M = (time.getMonth() + 1).toString().padStart(2, '0')
        const D = time.getDate().toString().padStart(2, '0')
        const h = time.getHours().toString().padStart(2, '0')
        const m = time.getMinutes().toString().padStart(2, '0')
        const s = time.getSeconds().toString().padStart(2, '0')
        return `${Y}-${M}-${D} ${h}:${m}:${s}`
    }

    function download1() {
        const url = '{:url("matchlives/lists2")}?export=1&' + $("#sbumitForm").serialize();
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true); // 也可以使用POST方式，根据接口
        xhr.setRequestHeader('Content-Type', 'application/octet-stream');
        xhr.responseType = 'blob'; // 返回类型blob
        xhr.onload = function (e) {
            if (this.status === 200) {
                const blob = this.response;
                const reader = new FileReader();
                reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
                reader.onload = function (e) {
                    const a = document.createElement('a');
                    a.download = "破晓赛事数据.xlsx"
                    a.href = e.target.result;
                    document.documentElement.appendChild(a);
                    a.click();
                    a.remove(); // 等价于document.documentElement.removeChild(a);
                };
            }
        };
        xhr.send(); // 发送ajax请求
    }
</script>
</body>

</html>